<template>
	<div id="box">
		<header class="head">
            <div @click="ppp"><router-link tag="i" to="/" class="iconfont icon-left"></router-link></div>
            <div>订单</div>
            <div></div>
        </header>
        <div class="dl">
			<img src="static/img/4efda8c6bf4734d39faf86fe190c3gif.gif"/>
			<p>近三个月无外卖订单记录</p>
            <span>查看三个月前的消费订单 <em><i class="iconfont icon-fa-angle-down"></i></em></span>
		</div>
	</div>
</template>
<script>
export default {
		data() {
			return {
				 
			}
		},
		methods: {
			//事件
			ppp(){
				for(var i=0;i<this.pp.length;i++){
						this.pp[i].style.color = "#9c9c9c";
				}
				this.pp[0].style.color = "#0699ff";
			},
		},
		mounted(){
			//原生js
			this.pp=document.querySelectorAll(".foot>p");
		}
	}
</script>

<style scoped lang="less">
  .px2rem(@name, @px){
    @{name}: @px / 37.5 * 1rem;
  }
#box{
    background: rgb(245,245,245);
	height:91vh;
}
.head{
    background: rgb(0,143,255);
    color: #fff;
    .px2rem(height,44);
    .px2rem(padding,15);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    font-weight:bold;
    .px2rem(font-size,20); 
    i{
     .px2rem(font-size,20); 
    }
    div:last-child{
		.px2rem(width,20); 
	}
}
.dl{
	padding:10vh;
	display:flex;
	flex-direction:column;
	justify-content: center;
    align-items: center; 
    .px2rem(font-size,13);
	img{
		width:60vw;
		height:60vw;
	}
	p{
        .px2rem(line-height,57);
        .px2rem(font-size,17);
    }
}
</style>